<style lang="less" scoped>
.scroll {
  &-view {
    text-align: left;
    white-space: nowrap;
    overflow-x: scroll;
    position: relative;
    font-size: 0;
    letter-spacing: 0;
  }
  &-item {
    display: inline-block;
    padding: 8px 18px;
    font-size: 16px;
    letter-spacing: 0;
  }
  &-slider {
    position: absolute;
    content: ' ';
    // bottom: 1px;
    // top: 1em;
    height: 1px;
    background-color: #3399ff;
    transition: all 0.3s;
    left: 0;
    z-index: 1;
  }
  &-hide {
    font-size: 0;
    letter-spacing: 0;
    height: 0;
    overflow: hidden;
    &__item {
      display: inline;
      font-size: 16px;
    }
    #scrollW {
      padding: 0;
    }
    #scrollWP {
      padding: 0 0 0 18px;
    }
  }
}
.active {
  color: #3399ff;
}
</style>

<template>
  <!-- tab-bar -->
  <scroll-view class='scroll-view' scroll-x="true" @click="tabClick">
    <div :class="['scroll-item',{active:activeIndex==index}]" v-for="(item,index) in tabs" :key="index" :id="'scroll'+index" :data-index="index">{{item}}</div>
    <div class="scroll-slider" :style="scrollSlider"></div>
    <div class="scroll-hide">
      <div class="scroll-hide__item" id="scrollW">这里用于获取字体宽度</div>
      <div class="scroll-hide__item" id="scrollWP">这里用于获取字体宽度</div>
    </div>
  </scroll-view>
</template>
<script>
export default {
  props: ['activeIndex', 'tabs'],
  data() {
    return {
      r: 0,
      winW: 0
    };
  },
  onReady() {
    setTimeout(() => {
      this.setFontWidth();
    }, 100);
  },
  computed: {
    scrollSlider() {
      // tab滑动样式
      if (!this.tabs[this.activeIndex]) return;
      // 获取当前滑动条宽度
      const curItemWidth = this.getWidthBychartLen(this.tabs[this.activeIndex]);

      // 当前滑动条偏移字符
      const preCharts = this.tabs
        .filter((item, index) => index < this.activeIndex)
        .join('');

      // 当前滑动条偏移字符宽度
      const preChartWidth = this.getWidthBychartLen(preCharts);
      // 当前滑动条偏移padding宽度
      const paddingWidth = (this.activeIndex * 2 + 1) * this.fontPadWidth;

      const left = paddingWidth + preChartWidth;
      console.log(123);

      return `width:${curItemWidth}px;transform: translateX(${left}px)`;
    }
  },
  methods: {
    getWidthBychartLen(charts) {
      if (!this.fontWidth) {
        this.setFontWidth();
      }
      if (!charts) return 0;
      // 通过字符计算宽度
      const REG = /[\u4e00-\u9fa5]/g;
      return charts.replace(REG, 'xx').length * this.fontWidth || 0;
    },
    tabClick(e) {
      const index = e.target.dataset.index || 0;
      // tab点击回调
      this.$emit('indexChange', index);
    },
    setFontWidth() {
      var query = wx.createSelectorQuery();
      var w = 0;
      query
        .select(`#scrollW`)
        .boundingClientRect(res => {
          if (!res) return;
          w = res.width;
          this.fontWidth = w / 20;
        })
        .select(`#scrollWP`)
        .boundingClientRect(res => {
          if (!res) return;
          this.fontPadWidth = res.width - w;
        })
        .exec();
    }
  }
};
</script>
